<template>
    <header>
        <nav class="navbar site-nav navbar-expand-md fixed-top">
            <div class="container">
                <a class="navbar-brand" href="">装修平台</a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault"
                        aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
                        <span class="navbar-toggler-icon">
                            <span class="fa fa-bars"></span>
                        </span>
                </button>

                <div class="collapse navbar-collapse" id="navbarsExampleDefault">
                    <ul class="navbar-nav mr-auto">
                        <li class="nav-item active">
                            <a class="nav-link" href="#">工人网采</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">设计师</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">工地展示</a>
                        </li>
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle" data-toggle="dropdown" aria-expanded="true" aria-haspopup="true"
                               id="dropdown-online-order" href="#">在线下单</a>
                            <div id="dropdown-online-order" class="dropdown-menu">
                                <a class="dropdown-item" @click="show_calc" href="#">工人</a>
                                <a class="dropdown-item" @click="show_calc">设计师</a>
                            </div>
                        </li>
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle" id="dropdown-customer-ex-services" data-toggle="dropdown" aria-haspopup="true"
                               aria-expanded="true" href="#">客户增值服务</a>
                            <div id="dropdown-customer-ex-service" class="dropdown-menu">
                                <a class="dropdown-item" href="#">工人</a>
                                <a class="dropdown-item" href="#">设计师</a>
                            </div>
                        </li>
                    </ul>
                    <form class="form-inline my-2 my-lg-0">
                        <input class="form-control mr-sm-2" type="text" placeholder="请输入..." aria-label="Search">
                        <button class="btn btn-search my-2 y-sm-0" type="submit">搜索</button>
                    </form>
                </div>
            </div>
        </nav>
    </header>
</template>

<script>
export default {
  name: 'Header',
  props: {
    toggle_if_show_calc: {
      type: Function
    }
  },
  methods: {
    show_calc () {
      this.toggle_if_show_calc()
    }
  }
}
</script>

<style scoped>
    header {
        position: relative;
        z-index: 1;
    }

    .site-nav {
        font-weight: bold;
        color: #007bff;
        background-color: #ff5900;
    }

    .site-nav a {
        font-weight: bold;
        color: #fff;
    }

    .btn-search:hover {
        background-color: #eee !important;
    }
</style>
